import React, { useState } from 'react';
import { Badge, TabBar } from 'antd-mobile';    
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
  AddCircleOutline
} from 'antd-mobile-icons';
import {  useLocation, useNavigate, useRoutes } from 'react-router-dom';
import routers from "./router/index"
import style from "./css/T.module.css"
export default function T() {
    const tabs = [
        {
          key: '/home',
          title: '首页',
          icon: <AppOutline />
        },
        {
          key: '/plaza',
          title: '广场',
          icon: <UnorderedListOutline />
        },
        {
            key: '/announce',
            title: '发布',
            icon: <AddCircleOutline />
          },
        {
          key: '/news',
          title: '消息',
          icon: (active) =>
            active ? <MessageFill /> : <MessageOutline />
        },
        {
          key: '/my',
          title: '我的',
          icon: <UserOutline />
        },
      ]
    const location = useLocation()
    const pathName = location.pathname.split('/')[1]
    const navigate  = useNavigate()
    const token = localStorage.getItem('token')
    const  change=(e)=>{
      if (e == '/announce' || e == '/news' || e == '/my') {
          if (!token) {
            navigate('/login/get')
          }else{
            navigate (e)
          }
      }else{
        navigate (e)
        }
    }
    const element = useRoutes(routers);
  return (
    <>
    {element}
    {
         pathName != 'swiper' && pathName != '' && location.pathname.split('/')[2] == undefined &&
        <TabBar activeKey={'/'+pathName} className={style.a}  onChange={change}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} ></TabBar.Item>
          ))}
    </TabBar>
    }
  </>
  )
}
